﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gridx - Personal Portfolio HTML Template</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="assets/css/iconoir.css">

    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/aos.css">

    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

    <main class="main-aboutpage">

        <!-- Header -->
        <header class="header-area">
            <div class="container">
                <div class="gx-row d-flex align-items-center justify-content-between">
                    <a href="index.html" class="logo">
                        <img src="assets/images/logo.svg" alt="Logo">
                    </a>

                    <nav class="navbar">
                        <ul class="menu">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="works.html">Works</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                        <a href="contact.html" class="theme-btn">Let's talk</a>
                    </nav>

                    <a href="contact.html" class="theme-btn">Let's talk</a>

                    <div class="show-menu">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </header>

        <!-- Credentials -->
        <section class="credential-area">
            <div class="container">
                <div class="gx-row d-flex">
                    <div class="credential-sidebar-wrap" data-aos="zoom-in">
                        <div class="credential-sidebar text-center">
                            <div class="shadow-box">
                                <img src="assets/images/bg1.png" alt="BG" class="bg-img">
                                <div class="img-box">
                                    <img src="assets/images/me.png" alt="About Me">
                                </div>
                                <h2>David Henderson</h2>
                                <p>@davidhenderson</p>
        
                                <ul class="social-links d-flex justify-content-center">
                                    <li><a href="#"><i class="iconoir-dribbble"></i></a></li>
                                    <li><a href="#"><i class="iconoir-twitter"></i></a></li>
                                    <li><a href="#"><i class="iconoir-instagram"></i></a></li>
                                    <li><a href="#"><i class="iconoir-facebook-tag"></i></a></li>
                                </ul>
        
                                <a href="contact.html" class="theme-btn">Contact Me</a>
                            </div>
                        </div>
                    </div>

                    <div class="credential-content flex-1">
                        <div class="credential-about" data-aos="zoom-in">
                            <h2>About Me</h2>
                            <p>Sit amet luctussd fav venenatis, lectus magna fringilla inis urna, porttitor rhoncus dolor purus non enim praesent in elementum sahas facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etisam dignissim diam quis enim lobortis viverra orci sagittis eu volutpat odio facilisis mauris sit.</p>
                            <p>Scelerisque fermentum duisi faucibus in ornare quam sisd sit amet luctussd fav venenatis, lectus magna fringilla zac urna, porttitor rhoncus dolor purus non enim praesent cuz elementum sahas facilisis leot.</p>
                        </div>

                        <div class="credential-edc-exp credential-experience">
                            <h2 data-aos="fade-up">Experience</h2>
                            <div class="credential-edc-exp-item" data-aos="zoom-in">
                                <h4>2007 - 2017</h4>
                                <h3>Framer Designer & Developer</h3>
                                <h5>Bluebase Designs</h5>
                                <p>Sit amet luctussd fav venenatis, lectus magna fringilla inis urna, porttitor rhoncus dolor purus non enim praesent in elementum sahas facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etisam dignissim diam quis enim lobortis viverra orci sagittis eu volutpat odio facilisis mauris sit.</p>
                            </div>
                            <div class="credential-edc-exp-item" data-aos="zoom-in">
                                <h4>2017 - 2023</h4>
                                <h3>Front-End Developer</h3>
                                <h5>Larsen & Toubro</h5>
                                <p>Sit amet luctussd fav venenatis, lectus magna fringilla inis urna, porttitor rhoncus dolor purus non enim praesent in elementum sahas facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etisam dignissim diam quis enim lobortis viverra orci sagittis eu volutpat odio facilisis mauris sit.</p>
                            </div>
                        </div>

                        <div class="credential-edc-exp credential-education">
                            <h2 data-aos="fade-up">Education</h2>
                            <div class="credential-edc-exp-item" data-aos="zoom-in">
                                <h4>2004 - 2007</h4>
                                <h3>Bachelor Degree in Psychology</h3>
                                <h5>University of California</h5>
                                <p>Sit amet luctussd fav venenatis, lectus magna fringilla inis urna, porttitor rhoncus dolor purus non enim praesent in elementum sahas facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etisam dignissim diam quis enim lobortis viverra orci sagittis eu volutpat odio facilisis mauris sit.</p>
                            </div>
                            <div class="credential-edc-exp-item" data-aos="zoom-in">
                                <h4>2007 - 2009</h4>
                                <h3>Master Degree in Designing</h3>
                                <h5>University of Texas</h5>
                                <p>Sit amet luctussd fav venenatis, lectus magna fringilla inis urna, porttitor rhoncus dolor purus non enim praesent in elementum sahas facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etisam dignissim diam quis enim lobortis viverra orci sagittis eu volutpat odio facilisis mauris sit.</p>
                            </div>
                        </div>

                        <div class="skills-wrap">
                            <h2 data-aos="fade-up">Skills</h2>
                            <div class="d-grid skill-items gap-24 flex-wrap">
                                <div class="skill-item" data-aos="zoom-in">
                                    <span class="percent">85%</span>
                                    <h3 class="name">JavaScript</h3>
                                    <p>Non enim praesent</p>
                                </div>
                                <div class="skill-item" data-aos="zoom-in">
                                    <span class="percent">78%</span>
                                    <h3 class="name">Python</h3>
                                    <p>Non enim praesent</p>
                                </div>
                                <div class="skill-item" data-aos="zoom-in">
                                    <span class="percent">92%</span>
                                    <h3 class="name">Figma</h3>
                                    <p>Non enim praesent</p>
                                </div>
                                <div class="skill-item" data-aos="zoom-in">
                                    <span class="percent">90%</span>
                                    <h3 class="name">WordPress</h3>
                                    <p>Non enim praesent</p>
                                </div>
                                <div class="skill-item" data-aos="zoom-in">
                                    <span class="percent">81%</span>
                                    <h3 class="name">React</h3>
                                    <p>Non enim praesent</p>
                                </div>
                                <div class="skill-item" data-aos="zoom-in">
                                    <span class="percent">87%</span>
                                    <h3 class="name">Adobe XD</h3>
                                    <p>Non enim praesent</p>
                                </div>

                            </div>
                        </div>

                        <div class="skills-wrap awards-wrap">
                            <h2 data-aos="fade-up">Awards</h2>
                            <div class="d-grid skill-items gap-24 flex-wrap">
                                <div class="skill-item" data-aos="zoom-in">
                                    <span class="percent">14 May 2020</span>
                                    <h3 class="name">Bluebase</h3>
                                    <p>Non enim praesent</p>
                                </div>
                                <div class="skill-item" data-aos="zoom-in">
                                    <span class="percent">26 June 2018</span>
                                    <h3 class="name">Demble</h3>
                                    <p>Non enim praesent</p>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        


        <!-- Footer -->
        <footer class="footer-area">
            <div class="container">
                <div class="footer-content text-center">
                    <a href="index.html" class="logo">
                        <img src="assets/images/logo.svg" alt="Logo">
                    </a>
                    <ul class="footer-menu">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="works.html">Works</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                    <p class="copyright">
                        &copy; All rights reserved by <a href="http://www.bootstrapMB.com">bootstrapMB</a>
                    </p>
                </div>
            </div>
        </footer>

    </main>
    

    <script src="assets/js/jquery-3.6.4.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/aos.js"></script>
    <script src="assets/js/main.js"></script>
</body>
</html>
